<template>
    <div class="discuss-wrap">
        <div class="discuss-list-wrap">
            <div class="discuss-detail-top">
                <div class="discuss-detail-top-title">
                    <div class="top-title-image">
                        <img :src="parentItem.parentPicUrl" alt="">
                    </div>
                    <h3>{{parentItem.parentCreator}}</h3>
                </div>
                <p style="word-break:break-all;">{{parentItem.parentSummary}}</p>
            </div>
            <div class="discuss-item" v-for="(item,key) of dataList" :key="key">
                <div class="item-top">
                    <div class="item-top-img">
                        <img :src="item.PicUrl" alt="">
                    </div>
                    <div class="item-top-right">
                        <h3>{{item.Creator}}</h3> <span>{{item.CreateTime}}</span>
                    </div>
                </div>
                <div class="item-center">
                    {{item.Summary}}
                </div>
                <div class="item-bottom">
                    <span class="color-gray" @click="confirmDelete(item,key)" v-if="item.UserID==userInfo.UserID">删除</span>
                </div>
            </div>
            <p style="text-align: center" v-if="moreText">下拉加载更多</p>
            <p style="text-align: center" v-if="noMoreText">没有更多数据了</p>
        </div>
        <div class="no-data-wrap" v-if="showNoData">
            <img src="../../../static/tabs/noData.png" alt="">
        </div>
        <div class="discuss-footer-fixed">
            <div class="footer-textarea-wrap">
                <textarea fixed="true" class="footer-textarea" placeholder="请输入..." v-model='Summary'></textarea>
            </div>
            <div class="footer-button" @click="submitData">回复 Ta</div>
        </div>
        <van-toast id="van-toast" />
        <van-dialog id="van-dialog" />
    </div>
</template>
<script>
    import { CourseDiscussInfoList, CourseDiscussAdd, CourseDiscussDelete } from '@/providers/service'
    export default {
        data() {
            return {
                parentItem:null,
                returnData: {},
                Summary: '',
                userInfo: {},
                PageIndex: 0,
                PageSize: 10,
                dataList: [],
                loadMoreBool: true,
                showNoData:false,
                moreText:false,
                noMoreText:false
            }
        },
        // 上拉加载
        onReachBottom() {
            if(!this.moreText){ return false}
            this.getData();
        },
        onPullDownRefresh() {
            this.PageIndex = 0;
            this.dataList = []
            this.moreText = false
            this.noMoreText = false
            this.getData();
            wx.stopPullDownRefresh()
            this.$toast('刷新成功')
        },
        methods: {
            confirmDelete(item,key){
                this.$dialog.confirm({
                    title:'温馨提示',
                    message:'是否删除该条评论'
                }).then(() =>{
                    this.deletItem(item,key)
                }).catch((err)=>{
                    console.log(`二级评论${err}`)
                })
            },
            async deletItem(item, key) {
                try {
                    let res = await CourseDiscussDelete({
                        ID: item.ID
                    })
                    this.dataList.splice(key, 1)
                    if(this.dataList && !this.dataList.length){
                        this.showNoData = true
                    }
                    this.$toast('删除成功!')
                } catch (error) {
                    console.log(error)
                }
            },
            async submitData() {
                if (!this.Summary) {
                    this.$toast('请录入回复内容后才可回复Ta！')
                    return false
                }
                let { TID, OtherCourseID, DiscussID } = this.$route.query
                let { RoleCode, UserID } = this.userInfo

                try {
                    let res = await CourseDiscussAdd({
                        TID,
                        ParentID: DiscussID,
                        UserID,
                        CreateBy: UserID,
                        Summary: this.Summary,
                        IPAdress: '127.0.0.1',
                        OtherCourseID,
                    });
                    this.dataList.unshift(res)
                    if(this.dataList && this.dataList.length){
                        this.showNoData = false
                    }
                    this.Summary = ''
                    this.$toast('回复成功!')
                } catch (error) {
                    console.log(error)
                }
            },
            async getData() {
                let { RoleCode, UserID } = this.userInfo
                let { DiscussID } = this.$route.query
                try {
                    let res = await CourseDiscussInfoList({
                        UserID,
                        PageIndex: this.PageIndex,
                        PageSize: this.PageSize,
                        DiscussID
                    })
                    this.returnData = res && res.ChirldComment && res.ChirldComment.length ? res.ChirldComment : {};
                    let _list = this.returnData ? this.returnData : []
                    // noData
                    if (!_list.length) {
                        if(this.PageIndex===0){
                            this.showNoData = true
                        }else{
                            this.noMoreText = true
                            this.moreText = false
                        }
                    }else{
                        this.noMoreText = _list.length < 10 ?true:false
                        this.moreText = !this.noMoreText
                        this.PageIndex = this.PageIndex + 1;
                        this.dataList = [...this.dataList, ..._list]
                    }
                } catch (error) {
                    console.log(error)
                }
            }
        },
        onShow() {
            this.parentItem = this.$route.query
            console.log(this.parentItem)
            this.dataList = []
            this.PageIndex = 0
            this.moreText = false
            this.noMoreText = false
            this.userInfo = wx.getStorageSync('userInfo')
            this.getData();
        },
        onUnload(){
            this.Summary = ''
            this.showNoData = false
        },

    }
</script>
<style>
    page {
        height: 100%;
        width: 100%;
        background: #ffffff;

    }
</style>
<style scoped lang="less">

    .discuss-wrap {
        position: relative;
        min-height: 100%;

        .no-data-wrap {
            position:absolute;
            left:50%;
            transform: translate(-50%,-50%);
        }
        .discuss-list-wrap {
            position: relative;
            padding-bottom: 320rpx;

            .discuss-item {
                position: relative;
                padding: 40rpx 30rpx 25rpx 30rpx;
                border-bottom: 1rpx solid #dddddd;

                .item-top {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .item-top-img {
                        height: 50rpx;
                        width: 50rpx;
                        border-radius: 100%;
                        background: green;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 100%;
                        }
                    }

                    .item-top-right {
                        flex: 1;
                        display: flex;
                        align-items: baseline;
                        padding-left: 25rpx;

                        h3 {
                            font-size: 28rpx;
                            margin-right: 20rpx;
                            color: #636363;
                        }

                        span {
                            font-size: 24rpx;
                            color: #636363;
                        }
                    }
                }

                .item-center {
                    padding-left: 75rpx;
                    font-size: 24rpx;
                    color: #636363;
                }

                .item-bottom {
                    text-align: right;

                    .color-gray {
                        font-size: 26rpx;
                        color: #000000;
                    }
                }
            }

            .no-more-data {
                padding: 25rpx 0;
                font-size: 28rpx;
                text-align: center;
            }
        }

        .discuss-list-wrap {
            position: relative;
            padding-bottom: 320rpx;
            min-height: 100%;

            .discuss-detail-top {
                background: #88888a;
                padding: 10rpx 30rpx 25rpx;

                .discuss-detail-top-title {
                    height: 50rpx;
                    width: 100%;
                    display: flex;
                    align-items: center;

                    .top-title-image {
                        height: 50rpx;
                        width: 50rpx;
                        background: #4aa585;
                        border-radius: 100%;
                        overflow: hidden;
                        margin-right: 25rpx;
                        img {
                            height: 100%;
                            width: 100%;
                            border-radius: 100%;
                        }
                    }
                    h3 {
                        font-size: 32rpx;
                        color: white;
                    }
                }
                p {
                    font-size: 25rpx;
                    color: white;
                    margin-top: 5rpx;
                    line-height: 35rpx;
                    padding-left: 75rpx;
                }
            }
        }

        .discuss-footer-fixed {
            position: fixed;
            height: 320rpx;
            width: 100%;
            right: 0;
            bottom: 0;
            left: 0;
            background: #f2f2f2;
            z-index: 99;

            .footer-textarea-wrap {
                height: 240rpx;
                padding: 30rpx 28rpx;
                box-sizing: border-box;

                .footer-textarea {
                    background: white;
                    width: 100%;
                    height: 100%;
                    border: 1rpx solid #dddddd;
                    padding: 10rpx;
                    font-size: 25rpx;
                    box-sizing: border-box;
                }
            }

            .footer-button {
                height: 80rpx;
                width: 100%;
                background: #4aa585;
                line-height: 80rpx;
                text-align: center;
                color: #fff;
                font-size: 32rpx;
            }
        }
    }
</style>
